<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox布局示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        .demo-box {
            margin: 20px;
            padding: 20px;
            border: 2px solid #3498db;
            background-color: #f8f9fa;
        }

        .flex-container {
            display: flex;
            margin: 10px 0;
            background-color: #ecf0f1;
            padding: 10px;
            min-height: 100px;
        }

        .flex-item {
            background-color: #3498db;
            color: white;
            padding: 15px;
            margin: 5px;
            text-align: center;
            border-radius: 4px;
        }

        /* flex-direction示例 */
        .flex-row { flex-direction: row; }
        .flex-column { flex-direction: column; }
        .flex-row-reverse { flex-direction: row-reverse; }
        .flex-column-reverse { flex-direction: column-reverse; }

        /* flex-wrap示例 */
        .flex-nowrap { flex-wrap: nowrap; }
        .flex-wrap { flex-wrap: wrap; }
        .flex-wrap-reverse { flex-wrap: wrap-reverse; }

        .flex-wrap .flex-item,
        .flex-wrap-reverse .flex-item,
        .flex-nowrap .flex-item {
            width: 100px;
        }

        /* justify-content示例 */
        .justify-start { justify-content: flex-start; }
        .justify-end { justify-content: flex-end; }
        .justify-center { justify-content: center; }
        .justify-between { justify-content: space-between; }
        .justify-around { justify-content: space-around; }
        .justify-evenly { justify-content: space-evenly; }

        /* align-items示例 */
        .align-start { align-items: flex-start; }
        .align-end { align-items: flex-end; }
        .align-center { align-items: center; }
        .align-stretch { align-items: stretch; }
        .align-baseline { align-items: baseline; }

        .align-items-demo {
            height: 200px;
        }

        /* flex-grow示例 */
        .flex-grow .flex-item {
            flex-grow: 1;
        }
        .flex-grow .grow-2 {
            flex-grow: 2;
        }

        /* flex-shrink示例 */
        .flex-shrink .flex-item {
            width: 200px;
            flex-shrink: 1;
        }
        .flex-shrink .shrink-2 {
            flex-shrink: 2;
        }

        /* flex-basis示例 */
        .flex-basis .flex-item {
            flex-basis: 200px;
        }

        .description {
            margin: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
            line-height: 1.6;
        }

        .controls {
            margin: 10px 0;
        }

        button {
            padding: 5px 10px;
            margin: 5px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Flexbox布局详解</h1>

        <section>
            <h2>1. flex-direction（主轴方向）</h2>
            <div class="description">
                控制flex容器中子元素的排列方向。
            </div>
            <div class="demo-box">
                <div class="flex-container flex-row">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                <div class="controls">
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container flex-row'">row</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container flex-column'">column</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container flex-row-reverse'">row-reverse</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container flex-column-reverse'">column-reverse</button>
                </div>
            </div>
        </section>

        <section>
            <h2>2. flex-wrap（换行方式）</h2>
            <div class="description">
                控制flex项目是否换行。
            </div>
            <div class="demo-box">
                <div class="flex-container flex-nowrap">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                    <div class="flex-item">4</div>
                    <div class="flex-item">5</div>
                </div>
                <div class="controls">
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container flex-nowrap'">nowrap</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container flex-wrap'">wrap</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container flex-wrap-reverse'">wrap-reverse</button>
                </div>
            </div>
        </section>

        <section>
            <h2>3. justify-content（主轴对齐）</h2>
            <div class="description">
                控制flex项目在主轴上的对齐方式。
            </div>
            <div class="demo-box">
                <div class="flex-container justify-start">
                    <div class="flex-item">1</div>
                    <div class="flex-item">2</div>
                    <div class="flex-item">3</div>
                </div>
                <div class="controls">
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container justify-start'">flex-start</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container justify-end'">flex-end</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container justify-center'">center</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container justify-between'">space-between</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container justify-around'">space-around</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container justify-evenly'">space-evenly</button>
                </div>
            </div>
        </section>

        <section>
            <h2>4. align-items（交叉轴对齐）</h2>
            <div class="description">
                控制flex项目在交叉轴上的对齐方式。
            </div>
            <div class="demo-box">
                <div class="flex-container align-items-demo align-stretch">
                    <div class="flex-item">1</div>
                    <div class="flex-item" style="height: 80px">2</div>
                    <div class="flex-item">3</div>
                </div>
                <div class="controls">
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container align-items-demo align-stretch'">stretch</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container align-items-demo align-start'">flex-start</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container align-items-demo align-end'">flex-end</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container align-items-demo align-center'">center</button>
                    <button onclick="this.parentElement.previousElementSibling.className='flex-container align-items-demo align-baseline'">baseline</button>
                </div>
            </div>
        </section>

        <section>
            <h2>5. flex-grow（扩展比例）</h2>
            <div class="description">
                控制flex项目的放大比例。
            </div>
            <div class="demo-box">
                <div class="flex-container flex-grow">
                    <div class="flex-item">1 (flex-grow: 1)</div>
                    <div class="flex-item grow-2">2 (flex-grow: 2)</div>
                    <div class="flex-item">3 (flex-grow: 1)</div>
                </div>
            </div>
        </section>

        <section>
            <h2>6. flex-shrink（收缩比例）</h2>
            <div class="description">
                控制flex项目的收缩比例。
            </div>
            <div class="demo-box">
                <div class="flex-container flex-shrink">
                    <div class="flex-item">1 (flex-shrink: 1)</div>
                    <div class="flex-item shrink-2">2 (flex-shrink: 2)</div>
                    <div class="flex-item">3 (flex-shrink: 1)</div>
                </div>
            </div>
        </section>

        <section>
            <h2>7. flex-basis（基准尺寸）</h2>
            <div class="description">
                指定flex项目在主轴方向上的初始大小。
            </div>
            <div class="demo-box">
                <div class="flex-container flex-basis">
                    <div class="flex-item">1 (flex-basis: 200px)</div>
                    <div class="flex-item">2 (flex-basis: 200px)</div>
                    <div class="flex-item">3 (flex-basis: 200px)</div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>
